<template>
  <!-- 商品审核 -->
  <el-form-item :prop="prospString" class="common-form-width">
    <template #label>
      <div class="audit-label"><span>商品审核</span>
        <el-popover placement="bottom" :width="200" trigger="hover" content="开启后，用户兑换该商品，需要经过您的审核，审核通过的用户可以领取，审核拒绝则领取失败">
          <template #reference>
            <span class="question-icon">?</span>
          </template>
        </el-popover>
      </div>
    </template>
    <div> <el-switch active-text="开启" inactive-text="关闭" inline-prompt v-model="modelValue" :active-value="1"
        :inactive-value="0" />
      <div class="tips">开启后,及时前往“订单管理-审核订单”进行审核</div>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: string | number;
    prospString: string,//绑定的属性key
  }>(),
  {
    modelValue: 0,
    prospString: 'verifyFlag'
  }
);

const emits = defineEmits(["update:model-value"]);
const modelValue = computed({
  set(newValue) {
    emits("update:model-value", newValue);
  },
  get() {
    return props.modelValue;
  },
});

</script>
<style lang="scss" scoped>
.audit-label {
  display: flex;
  align-items: center;
}

.question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  font-size: 10px;
  color: var(--el-text-color-regular);
  border-radius: 50%;
  border: 1px solid var(--el-text-color-regular);
}

.tips {
  font-size: 12px;
  color: #999;
}
</style>